<template>
    <v-container>
        <v-card width="900px" height="900px">
            <v-row no-gutters >
                <v-col cols="4"
                       class="py-0"
                    v-for="(imgSrc,i) in imgList" :key="i">
                    <img width="300px" height="300px" class="py-0 my-0" :src="imgSrc" @click="swapPosition($event)"/>
                </v-col>
            </v-row>
        </v-card>
        <v-btn @click="getImages">开始游戏</v-btn>
    </v-container>
</template>

<script>
    export default {
        name: "pt",
        data(){
            return{
                number:9,
                imgList:'',
                originalArray:[],
                imgBlack:''
            }
        },
        methods:{
            getImages(){
                let imgs= JSON.parse(localStorage.getItem("ptImages"))
                this.originalArray= imgs
                imgs[8]=this.imgBlack
                imgs.sort(function() {
                    return 0.5 - Math.random()
                })
                this.imgList= imgs
            },
            swapPosition(e){
                let img64=e.target.src;
                let number = this.imgList.indexOf(img64);
                let currect = this.imgList.indexOf(this.imgBlack);
                console.log(currect)
                console.log(typeof this.imgList[currect])
                // let aList = this.imgList
                if (number-3>=0 && number-3===currect){
                    let temp = this.imgList[number]
                    this.$set(this.imgList,number,this.imgList[currect])
                    this.$set(this.imgList,currect,temp)
                    return
                }
                if (number+3>=0 && number+3===currect){
                    let temp = this.imgList[number]
                    this.$set(this.imgList,number,this.imgList[currect])
                    this.$set(this.imgList,currect,temp)
                    return
                }
                if (number-1>=0 && number-1===currect){
                    let temp = this.imgList[number]
                    this.$set(this.imgList,number,this.imgList[currect])
                    this.$set(this.imgList,currect,temp)
                    return
                }
                if (number+1>=0 && number+1===currect){
                    let temp = this.imgList[number]
                    this.$set(this.imgList,number,this.imgList[currect])
                    this.$set(this.imgList,currect,temp)
                    return
                }
                // this.imgList = aList
            }
        }
    }
</script>

<style scoped>

</style>
